<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高投服务区大数据</title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="./css/icomoon/style.css">
</head>
<body>
<!--背景-->
<div id="main" class="main">
</div>
<!--头部-->
<!--<div id="middle" class="middle" ></div>-->
<div class="home left">
    <!--左侧标题-->
    <div class="row">
        <h4>贵州高投服务管理有限公司</h4>
        <h5 id="title"></h5>
    </div>
    <!--右侧时间显示-->
    <div class="right">
        <ul>
            <li>
                <span>当前</span>
                <span>时间</span>
            </li>
            <li id="time">
            </li>
            <li>
                <span id="nowWeek"></span>
                <span id="date"></span>
            </li>
        </ul>
    </div>
</div>
<!--左侧-->

<!--//左侧头部人流量统计-->
<div>
    <div class="title leftMenu">
        <i class="fa fa-user" style="text-align: center; font-size: 1.4rem"></i>
        <span class="title-left">今日累计客流：<span id="user" style="color: #fff;font-size: 2rem">132</span></span>
        <!--<span class="title-left"  style="margin-left: 0.8rem">平均滞留时间：<span id="userTime" style="color: #fff">2小时30分</span></span>-->
        <i class="fa fa-angle-double-left pull-right"></i>
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
    </div>
    <!--1、资本信息-->
    <div class="bar leftMenu">
        <div style="color: #3EAACC;font-size: 1rem;text-align: center;margin-top: 0.2rem">基本信息</div>
        <div class="basic" id="basic">
        </div>
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
    </div>
    <!--2、地图-->
    <div class="Map leftMenu">
        <div style="color: #3EAACC;font-size: 1rem;text-align: center;margin-top: 0.2rem">人流分布</div>
        <div style="width: 24vw;height:28vh" id="Map"></div>
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
    </div>
    <!--3、仪表盘-->
    <div class="graph leftMenu">
        <div class="toiletTitle">厕所使用情况</div>
        <div class="pull-left col-lg-6 col-md-6 Toilet">
            <div id="letfTitile">贵阳->遵义</div>
            <div class="toilet"><span>男厕空位监控：</span><span id="leftManTiolet">00</span>/<span id="leftManSum"></span></div>
            <div class="toilet"><span>女厕空位监控：</span><span id="leftWomenTiolet">00</span>/<span id="leftWomenSum"></span></div>
        </div>
        <div class="pull-right col-lg-6 col-md-6 Toilet">
            <div id="rightTitile">遵义->贵阳</div>
            <div class="toilet"><span>男厕空位监控：</span><span id="rightManTiolet">00</span>/<span id="rightManSum"></span></div>
            <div class="toilet"><span>女厕空位监控：</span><span id="rightWomenTiolet">00</span>/<span id="rightWomenSum"></span></div>
        </div>
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
    </div>
    <!--<div class="line" id="line"></div>-->
</div>
<!--右侧-->
<div>
    <div class="title rightMenu">
        <i class="fa fa-car" style="text-align: center; font-size: 1.4rem"></i>
        <span class="title-left">今日累计车流：<span id="car" style="color: #fff;font-size: 2rem">524</span></span>
        <!--<span class="title-left"  style="margin-left: 0.5rem">平均滞留时间：<span id="carTime" style="color: #fff">2小时30分</span></span>-->
        <i class="fa fa-angle-double-left pull-right"></i>
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
    </div>
    <!--1、天气-->
    <div class="weather rightMenu ">
      <div class="carportTitle">车辆滞留情况</div>
      <div class="pull-left col-lg-6 col-md-6 carport">
        <div id="leftcartitle1">遵义->贵阳</div>
        <div class="carportBig"><span>大车滞留车辆/时间：</span><span id="leftBigCarport1">00</span>/<span id="leftBigCarTime"></span></div>
        <div class="carportBig"><span>小车滞留车辆/时间：</span><span id="leftSmollCarport1">00</span>/<span id="leftSmollCarTime"></span></div>
        <div class="carportBig"><span>客车滞留车辆/时间：</span><span id="leftTruckCarport1">00</span>/<span id="leftTruckTime"></span></div>
      </div>
      <div class="pull-right col-lg-6 col-md-6 carport">
        <div id="rightcartitle1">贵阳->遵义</div>
        <div class="carportBig"><span>大车滞留车辆/时间：</span><span id="rightBigCarport1">00</span>/<span id="rightBigCarTime"></span></div>
        <div class="carportBig"><span>小车滞留车辆/时间：</span><span id="rightSmollCarport1">00</span>/<span id="rightSmollCarTime"></span></div>
        <div class="carportBig"><span>客车滞留车辆/时间：</span><span id="rightTruckCarport1">00</span>/<span id="rightTruckTime"></span></div>
      </div>
     <!--   <div class="today">
            <div>
                <span class="wen" id="wentoday" style="vertical-align: top">18℃-36℃</span>
                <span class="weatherIcon" id="typeToday" style="vertical-align: top">阴转晴</span>
                <span id="todayicon" class="icon-cloudy-sky"
                      style="margin-left: 0.5rem;font-size: 1.5rem;vertical-align: top"></span>
                <span class="wind" style="vertical-align: top">风向</span>
                <span style="margin-left: 0.875rem;vertical-align: top" id="windToday">西南</span>
            </div>
            <div style="width:  100%;height: 0.2vh;background: #3EAACC;margin: 2vh 0.5vw 0 0;opacity: 0.9"></div>
            <div class="tomorrow">
                &lt;!&ndash;昨天&ndash;&gt;
                <div class="col-md-3" style="float: left;padding: 0">
                    <div id="yesday">昨天</div>
                    <div id="yeswen" style="color: #fff">18℃-36℃</div>
                    <div style="margin-top: 0.5rem">
                        <span id="yestype" style="color: #fff;line-height: 3vh;vertical-align: top">阴转晴</span>
                        <span class="icon-cloudy"
                              style="margin-left: 0.5rem;margin-top: 1vh;font-size: 1.5rem;color: #ffffff;vertical-align: top"
                              id="yesicon"></span>
                    </div>
                </div>
                <div class="col-md-3" style="float: left ;padding: 0;">
                    <div id="firstDay">明天</div>
                    <div id="firstWen" style="color: #fff">18℃-36℃</div>
                    <div style="margin-top: 0.5rem">
                        <span id="firstType" style="color: #fff;line-height: 3vh;vertical-align: top">阴转晴</span>
                        <span id="firstIcon" class="icon-cloudy"
                              style="margin-left: 0.5rem;margin-top: 1vh;font-size: 1.5rem;color: #ffffff;vertical-align: top"></span>
                    </div>
                </div>
                <div class="col-md-3" style="float: left;padding: 0;">
                    <div id="secondDay">明天</div>
                    <div id="secondWen" style="color: #fff">18℃-36℃</div>
                    <div style="margin-top: 0.5rem">
                        <span id="secondType" style="color: #fff;line-height: 3vh;vertical-align: top">阴转晴</span>
                        <span id="secondIcon" class="icon-cloudy"
                              style="margin-left: 0.5rem;margin-top: 1vh;font-size: 1.5rem;color: #ffffff;vertical-align: top"></span>
                    </div>
                </div>
                <div class="col-md-3" style="float: left;padding: 0;">
                    <div id="thirdDay">明天</div>
                    <div id="thirdWen" style="color: #fff">18℃-36℃</div>
                    <div style="margin-top: 0.5rem">
                        <span id="thirdType" style="color: #fff;vertical-align: top">阴转晴</span>
                        <span id="thirdIcon" class="icon-cloudy"
                              style="margin-left: 0.5rem;margin-top: 1rem;font-size: 1.5rem;color: #ffffff;vertical-align: top"></span>
                    </div>
                </div>
            </div>
        </div>-->
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
    </div>
    <!--2、车流饼状图-->
    <div class="pie rightMenu">
        <div style="color: #3EAACC;font-size: 1rem;text-align: center;margin-top: 0.2rem">车流分布</div>
        <div style="width: 24vw;height: 28vh" id="pie"></div>
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
    </div>
    <!--3、仪表盘-->
    <div class="dashboard rightMenu">
        <div class="carportTitle">车位使用情况</div>
        <div class="pull-left col-lg-6 col-md-6 carport">
            <div id="leftcartitle">遵义->贵阳</div>
            <div class="carportBig"><span>大车车位监控：</span><span id="leftBigCarport">00</span>/<span id="leftBigCarSum"></span></div>
            <div class="carportBig"><span>小车车位监控：</span><span id="leftSmollCarport">00</span>/<span id="leftSmollCarSum"></span></div>
            <div class="carportBig"><span>客车车位监控：</span><span id="leftTruckCarport">00</span>/<span id="leftTruckSum"></span></div>
        </div>
        <div class="pull-right col-lg-6 col-md-6 carport">
            <div id="rightcartitle">贵阳->遵义</div>
            <div class="carportBig"><span>大车车位监控：</span><span id="rightBigCarport">00</span>/<span id="rightBigCarSum"></span></div>
            <div class="carportBig"><span>小车车位监控：</span><span id="rightSmollCarport">00</span>/<span id="rightSmollCarSum"></span></div>
            <div class="carportBig"><span>客车车位监控：</span><span id="rightTruckCarport">00</span>/<span id="rightTruckSum"></span></div>
        </div>
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
    </div>
</div>
<!--中间-->
<div>
    <!--中间头部logo-->
    <div class="bottom">

        <div class="bottomDiv" id="div">
            <div class="gradient leftline"></div>
            <div class="gradient rightline"></div>
            <img src="lib/image/logo.png">
            <!--<span style="font-size: 1.5rem">贵州高投集团</span>-->
        </div>
        <div class="lt all"></div>
        <div class="rt all"></div>
        <div class="lb all"></div>
        <div class="rb all"></div>
    </div>
    <!--视频播放-->
    <div class="video">
        <!--视频标题-->
        <!--<div  style="color: #3EAACC;font-size: 1rem;text-align: center;margin-top: 0.2rem;height: 3vh;line-height: 3vh;">视频展示</div>-->
        <!--左边图片-->
        <div class="leftvideo videoPhoto" id="leftImg" onclick="leftimgclick()">
            <i class="fa fa-angle-left" style="position: absolute;"></i>
        </div>
        <!--右边图片-->
        <div class="rightvideo videoPhoto" id="rightImg" onclick="rightimgclick()">
            <i class="fa fa-angle-right" style="position: absolute"></i>
        </div>
        <!--中间视频-->
        <video id="video" style="object-fit: fill;width: 100%;height: 52vh" autoplay muted="muted">
            <source type="video/mp4">
        </video>
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
    </div>
    <!--轮播图-->
    <div class="Introduction">

        <div id="banner">
            <!--<div id="banner_bg">-->
            <!--</div>-->
            <!--<div id="banner_info">-->
            <!--</div>-->
            <ul>
                <li class="on"> 1 </li>
                <li> 2 </li>
                <li> 3 </li>
                <li> 4 </li>
            </ul>
            <div id="banner_list">
                <div>
                    <img src="lib/image/1-1.png">
                    <p class="bannertitle">永兴村</p>
                    <p class="bannertext"> 永兴村是中国着名作家叶辛的第二故乡，永兴砂锅寨因名人而八方闻名。2005年，团省委书记陈昌旭发起久长春晖文化家园—永兴村砂窝寨
                        “春晖行动”，叶辛捐赠修建砂锅寨全国第一所“春晖小学”，砂锅寨成为春晖行动发祥地，名声更响。久长镇借机全力打造砂锅寨知青文化、春晖文化，修缮叶辛旧居，建20户统一规划、集中居住春晖家园、占地20余亩春晖广场。</p>
                </div>
                <div><img src="lib/image/1-2.png">
                    <p class="bannertitle">久长镇珍珠岛度假中心</p>
                    <p class="bannertext"> 久长镇珍珠岛度假中心，位于贵阳市修文县久长镇蚌壳堰湖畔（贵阳至遵义高等级公路45公里处）。青山环珍珠岛度假中心
                        抱、碧水依依，素有“一折青山一画屏、一湖碧水一古琴”的美称，是一个大型自然生态度假中心。</p>
                </div>
                <div><img src="lib/image/1-3.png">
                    <p class="bannertitle">苏格兰牧场度假中心</p>
                    <p class="bannertext"> 苏格兰牧场度假中心
                        打造集休闲娱乐、康体健身为一体的欧式风情园——苏格兰牧场度假中心。
                        一期工程至2008年已种草400余亩，种竹3500株，各种风景树、果树7000余株，办公楼、滑草俱乐部、马术俱乐部、高尔夫俱乐部及生活设施已建成。</p>
                </div>
                <div><img src="lib/image/1-4.png">
                    <p class="bannertitle">贵阳修文阳明文化园</p>
                    <p class="bannertext">贵阳修文阳明文化园总投资67.2亿元，规划总用地面积229.89公顷，毗邻贵毕高速。该项目计划2013年6月底动工，建设期为4年，第5年开始试运营。作为贵州省100个城市综合体之一，贵阳修文阳明文化园致力打造成为融文化展示功能、旅游服务功能、商贸商务功能、休闲养生功能、生态居住功能和公共管理功能为一体的新型城市综合体。</p>
                </div>
                <!-- <div><img src="lib/image/1-5.png">
                      <p style=" color: #3EAACC;margin-left: 19vw;margin-right:0.875vw;text-indent: 2rem;text-align: left"><span style="font-size: 1.5rem">大槐服务区</span> 位于开阳高速公路 K 80 公里 处 , 于 2003 年 9 月 3 日正式营业。服务区占地 20 亩， 建筑面积约 1720 平方米 ，附近主要有恩平等城市,
                         目前服务区内共有工作人员 64 人，能同时接待 300 人就餐， 60 人购物， 20 辆大巴车停靠。
                         服务区招牌菜：五香鹅，美极猪手，沙姜鱼头煲；
                         服务区地方特产： 阳江十八子刀具 ;
                         服务区顾客满意度 : 95%。</p>
                 </div>-->
                <!--<a href="#" target="_blank"><img src="lib/image/1-2.jpg"></a>-->
                <!--<a href="#" target="_blank"><img src="lib/image/1-3.jpg"></a>-->
                <!--<a href="#" target="_blank"><img src="lib/image/1-4.jpg"></a>-->
                <!--<a href="#" target="_blank"><img src="lib/image/1-5.jpg"></a>-->
            </div>
        </div>
        <div class="lt"></div>
        <div class="rt"></div>
        <div class="rb"></div>
        <div class="lb"></div>
    </div>
    <!--设置底部的版权信息-->
    <div class="bottomtext" >版权所有：贵州高投服务管理有限公司 <span>123</span> 技术支持：贵阳红鸟智能技术服务有限公司</div>
</div>

</body>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script>
<!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=12DDKEKWABDKneKfibVKefTNcyHRosT8"></script>-->
<script src="./node_modules/echarts/dist/echarts.js"></script>
<script src="./node_modules/echarts/dist/extension/bmap.js"></script>
<script src="js/md5.js"></script>
<script src="js/rightPie.js"></script>
<script src="js/backgroundMap.js"></script>
<script src="js/leftMenuBar.js"></script>
<script src="js/leftMenuMap.js"></script>
<script src="js/rightDashboard.js"></script>
<script src="js/Weather.js"></script>
<script src="js/titleData.js"></script>
<script src="js/ScrollBottom.js"></script>
<script src="js/Carousel.js"></script>
<script src="js/json.js"></script>
<script src="js/videos.js"></script>
<script src="js/app.js"></script>
</html>
